<script lang="ts">
    import { Badge } from "$lib/components/ui/badge";
    import { Button } from "$lib/components/ui/button";
    import UiButton from "$lib/core/UiButton.svelte";
    import * as Lucid from "@lucide/svelte";

    let {
        booking,
        booking_status,
        enterSpace,
    }: { booking: boolean; booking_status?: boolean; enterSpace: () => void } =
        $props();
</script>

<div class="flex justify-center">
    {#if booking}
        {#if booking_status === true}
            <UiButton onclick={enterSpace}>
                <Lucid.MonitorPlay />
            </UiButton>
        {:else if booking_status === false}
            <Badge variant="outline">等待处理</Badge>
        {:else}
            <Button class="text-sky-500" variant="link">我要预约</Button>
        {/if}
    {:else}
        <UiButton onclick={enterSpace}>
            <Lucid.MonitorPlay />
        </UiButton>
    {/if}
</div>
